<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<h1>滤镜</h1>

		<h2>hsb</h2>
		<!-- hsl 色相、饱和度、亮度 -->
		<p style="background-color: hsl(360deg 100% 97%);">文本</p>

		<p>
			<h2>深褐色 sepia</h2>
			<img src="img/maple.jpg" alt="">
			<img src="img/maple.jpg" style="filter: sepia(50%);" alt="">
		</p>

		<p>
			<h2>图像饱和度 saturate</h2>
			<img src="img/maple.jpg" alt="">
			<img src="img/maple.jpg" style="filter: saturate(10%);" alt="">
		</p>
		<p>
			<h2>图像的透明程度 opacity</h2>
			<img src="img/maple.jpg" alt="">
			<img src="img/maple.jpg" style="filter: opacity(60%);" alt="">
		</p>
		<p>
			<h2>图像反转 invert</h2>
			<img src="img/maple.jpg" alt="">
			<img src="img/maple.jpg" style="filter: invert(90%);" alt="">
		</p>
		<p>
			<h2>应用色相旋转 hue-rotate</h2>
			<img src="img/maple.jpg" alt="">
			<img src="img/maple.jpg" style="filter: hue-rotate(80deg),opacity(10%);" alt="">
		</p>
		<h2>图像转换为灰度图像 grayscale</h2>
		<img src="img/maple.jpg" alt="">
		<img src="img/maple.jpg" style="filter: grayscale(.9);" alt="">
		</p>
		<h2>设置一个阴影效果 drop-shadow</h2>
		<!-- 语法：offset-x,offset-y,blue-radius,color -->
		<img src="img/maple.jpg" alt="">
		<img src="img/maple.jpg" style="filter: drop-shadow(16px 16px 10px black);" alt="">
		</p>
		<h2>图像的对比度 contrast</h2>
		<img src="img/maple.jpg" alt="">
		<img src="img/maple.jpg" style="filter: contrast(.05)" alt="">
		</p>

		<h2>图像的高度 brightness</h2>
		<img src="img/maple.jpg" alt="">
		<img src="img/maple.jpg" style="filter: brightness(.8);" alt="">
		</p>

		<h2>图像设置高斯模糊 blur</h2>
		<img src="img/maple.jpg" alt="">
		<img src="img/maple.jpg" style="filter: blur(3px);" alt="">
		</p>

		<h2>svg </h2>
		<!-- 在锚点里面用name，这里又用id，可见标准的混乱 -->
		<img src="img/maple.jpg" alt="">
		<img src="img/maple.jpg" style="filter: url(svg1.svg#drop-shadow2);" alt="">
		</p>

		<h2>svg2 </h2>
		<!-- 在锚点里面用name，这里又用id，可见标准的混乱 -->
		<img src="img/maple.jpg" style="filter: url(blur.svg#filter);" alt="">
		<p style="font-size: 20px;filter: url(blur.svg#filter);">普通文本1234444343434344443.com</p>
		</p>
        <script type="text/javascript">
</html>